<template>
  <div class="mg_coin_detail">
    <div class="top-header border-bottom fixed-top">
      <div class="top-back">
        <a href="javascript:history.go(-1)"></a>
      </div>
      <h2 class="f36 ">{{query.gameName}}</h2>
      <div class="top-right">
        <a href="javascript:void(0)" @click="showMoreDetail=!showMoreDetail" class="sharelist"></a>
      </div>
    </div>
    <!--商品列表下拉-更多消息-->
    <div class="more_message border f36" style="height: 1.93rem" v-if="showMoreDetail">
      <ul>
        <router-link to="/vue/message">
          <li class="list-more border-bottom">
            <i class="android"></i>消息</li>
        </router-link>
        <router-link to="/">
          <li class="list-more">
            <i class="home_back"></i>首页</li>
        </router-link>
      </ul>
    </div>
    <div class="dialog_cover" v-if="showMoreDetail" style="z-index: 49;" @click="showMoreDetail=false"></div>
    <div class="detail-main mt-97 pb-200">
      <div class="detail-bt border-bottom px-30 py-15 bg-fff ">
        <div class="detail-left fl">
          <div class="ware-titl f32 color-000">{{detail.title}}</div>
          <div class="ware-price f36 color-m1">
            <span class="f32">￥</span>
            <span style="font-weight: 600">{{detail.price}}</span>
          </div>
          <div class="ware-client f26 color-666" v-show="detail.operatorName">
            {{detail.operatorName}}/{{detail.gameServerName}}
          </div>
        </div>
        <div class="shareopen fr text-center" @click="share">
          <i class="shareico"></i>
          <p class="f26 mt-15 color-666">分享</p>
        </div>
      </div>
      <div class="detail-tutorial f32 border-bottom bg-f8 px-30 mb-20 " @click="popupVisible = true">
        <div class="hrgames-cfi f26 color-666 fl">
          <i class="firm mr-30 ">担保交易</i>
        </div>
        <a href="javascript:void(0);" class="sharembgs"></a>
      </div>
      <!-- 交易说明 -->
      <div class="terms-dsction" style="overflow: hidden;">
        <div class="mbgame-iftion bg-fff px-30 py-20 border-bottom mb-20">
          <div class="iftion-titl f32 color-000">交易说明
          </div>
          <div class="iftion-conn">
            <!--有交易说明-->
            <div class="ift-list color-333 f28 mg_trade_description" v-if="tradeDescription !== null && tradeDescription.length" v-html="tradeDescription">
              <!--1、该商品交易方式为拍卖交易，买家在交易行上架相应价格的物品卖家拍下买家方可得到元宝。<br>-->
              <!--2、可交易的物品为非绑定七星以上包括七星的 珍兽或者装备。<br>-->
              <!--3、预售期为最少十小时，您的元宝（绑元）需要最少十小时后才可收到，交易用材料无法退还。<br>-->
              <!--4、请您尽量提前挂好物品以便更快的获取元宝 。<br>-->
              <!--<div class="img"><img src="~images/ift-list-img.jpg"></div>-->
            </div>
            <!--无交易说明-->
            <div class="explainn" v-if="tradeDescription !== null && !tradeDescription.length">
              <div class="explain-coner mt-20">
                <div class="excon-titl color-m1">
                  <i class="one fl">1</i>
                  <span class="fl ml-15 f30">下单支付</span>
                </div>
                <div class="excon-titl excon-hihg py-20">
                  <i class="fl">1</i>
                  <span class="fl ml-15 f28 color-666">选择商品后付款</span>
                </div>
                <div class="excon-titl color-m1">
                  <i class="two fl">1</i>
                  <span class="fl ml-15 f30">联系客服</span>
                </div>
                <div class="excon-titl excon-hihg py-20">
                  <i class="fl">1</i>
                  <span class="fl ml-15 f28 color-666">登入QQ联系客服，确认商品信息</span>
                </div>
                <div class="excon-titl color-m1">
                  <i class="three fl">1</i>
                  <span class="fl ml-15 f30">上游戏交易</span>
                </div>
                <div class="excon-titl excon-hihg py-20">
                  <i class="fl">1</i>
                  <span class="fl ml-15 f28 color-666">按照客服提示进行交易操作</span>
                </div>
                <div class="excon-titl color-m1">
                  <i class="four fl">1</i>
                  <span class="fl ml-15 f30">交易成功</span>
                </div>
                <div class="excon-hihg py-20">
                  <i class="fl">1</i>
                  <span class="fl ml-15 f28 color-666">5173将货款转账给卖家，交易成功</span>
                </div>
              </div>
            </div>
          </div>
        </div>
            <div class="search-game border-bottom mb-20 bg-fff" v-if="tradeDescription !== null && !tradeDescription.length">
        <div class="sgame f32">
          <span>如果遇到以下情况，请警惕是骗子</span>
        </div>
        <ul>
          <li class="px-30 border-bottom f30 color-000">
            <i class="fl sgm-ico"></i>
            <em>向您索要游戏帐号和密码</em>
          </li>
          <li class="px-30 border-bottom f30 color-000">
            <i class="fl sgm-ico"></i>
            <em>向您索要绑定手机号、验证码</em>
          </li>
          <li class="px-30 border-bottom f30 color-000">
            <i class="fl sgm-ico"></i>
            <em>向买卖家索要【保证金】【手续费】【诚信金】要 求支付宝转账等各种名目索要金钱的
            </em>
          </li>
          <li class="px-30 border-bottom f30 color-000">
            <i class="fl sgm-ico"></i>
            <em>发送假冒链接(钓鱼链接)给买卖家，在您输入帐号 密码后盗取您的游戏、支付宝、银行卡等帐号密码
            </em>
          </li>
          <li class="px-30 border-bottom f30 color-000">
            <i class="fl sgm-ico"></i>
            <em>自称是5173客服，并添加您的QQ，但官网验证不符的100%是骗子</em>
          </li>
        </ul>
      </div>
      <div class="guess-more f32 color-000 px-30 text-center fw bg-fff border-20" >
        <span>
          <a href="/vue/kf/validate-center?typeName=验证中心">验证客服真假</a>
        </span>
      </div>
      </div>
      <!-- 猜你喜欢 -->
      <div class="similar-tip" v-if="personLists && personLists.length > 0">
        <span class="span-icon-up f30 color-666 px-30">
          猜你喜欢
        </span>
      </div>
      <div class="terms-mbglist">
        <div v-for="(item, index) in personLists " v-if="personLists && index < guessLikeShowIndex" 
        @click="goLikeDetail(item)"
        class="listware px-30 py-30 bg-fff border-bottom mb-20">
          <div class="ware-titl f32 color-000">{{item.title}}</div>
          <div class="ware-client f28 color-000">
            <span class="color-888">运营商：</span>{{item.operatorName}}</div>
          <div class="ware-client f28 color-000">
            <span class="color-888">服务器：</span>{{item.gameServerName}}</div>
          <div class="ware-discount">
            <div class="dcnt-price f32 color-m1 text-right">{{item.price}}</div>
            <div class="dcnt-stock f28 color-888 text-right">库存 {{item.stockTotal}}</div>
          </div>
        </div>
        <!-- <div class="guess-more f32 color-000 px-30 text-center fw bg-fff border-20">
          <span>查看更多</span>
        </div> -->
        <p v-if="guessLikeLoad" style="text-align: center; margin-top: .5rem">
          <img src="~images/coins/loading-sm.gif">
          <span>请等待。。。</span>
        </p>
        <!-- </mt-loadmore> -->
        <div class="tab-empty" v-if="personLists && personLists.length > 0 && personLists.length <= guessLikeShowIndex">
          <div class="empty-conn px-30">
            <div class="list-img" style="width:4.07rem;height:1.41rem;margin:.36rem auto .2rem">
              <img style="max-width: 100%" src="~images/gamelist.png">
            </div>
            <div class="emp-text f28 color-999 text-center">抱歉，没有更多商品了~</div>
          </div>
        </div>
        <!-- <div v-if="isShowMore"> -->
          <div @click="guessLikeLoadMore()" v-if="personLists && personLists.length > guessLikeShowIndex" class="guess-more f32 color-000 px-30 text-center fw bg-fff border-20">
            <span>查看更多</span>
          </div>
        <!-- </div> -->
      </div>
      <div class="fixed-bottom border-top">
        <div class="goodslist-btn px-30 py-30 bg-fff">
          <a class="total f32 color-000 fl" href="#">合计
            <em class="color-m1 f37 ml-10">￥
              <i class="fontarial f40">{{detail.price}}</i>
            </em>
          </a>
          <a @click="goBuy" class="suborder f36 bg-f54 color-fff fr text-center" :class="{'button-disable': detail.publishStatus != 2 || !detail.stockTotal}">
            <span v-if="detail.publishStatus == 2 && detail.stockTotal">
              立即购买
            </span>
            <span v-else>
              无法购买
            </span>
          </a>
        </div>
      </div>
    </div>
    <mt-popup v-model="popupVisible" position="bottom">
      <!--服务保障-->
      <div class="sv-guarantee border-top bg-fff " style="width: 100%" @touchmove.prevent>
        <div class="scgtee-titl f32 color-666 border-bottom">
          <a class="close mr-30" @click="popupVisible=false"></a>服务保障
        </div>
        <div class="scgtee-demo px-30 border-bottom">
          <div class="sgde-lf fl">
            <i class="bao"></i>
          </div>
          <div class="sgde-tn">
            <div class="tn-til f28 color-000">担保交易</div>
            <div class="tn-txt f28 color-666 mt-10">卖家选择【担保交易】模式，需由客服联系卖家才能发货。</div>
          </div>
        </div>
        <div class="mt-80 bg-m1 f36 color-fff text-center sgde-btn" @click="popupVisible=false">朕知道了</div>
      </div>
    </mt-popup>
    <!--提示-->
    <div class="maskdiv2" v-if="showShareTip" @touchmove.prevent style="z-index: 990"></div>
    <div class="share-tip" v-if="showShareTip" @touchmove.prevent style="z-index: 991">
      <div class="share-img">
        <img src="~images/common/share-tip.png" alt="">
      </div>
      <div class="share-firm text-center" @click="showShareTip = false">
        <span class="color-fff f30">我知道了</span>
      </div>
    </div>
    <share></share>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import share from 'components/common/NewShare'

export default {
  components: {
    share
  },
  data() {
    return {
      isShowMore:false,
      pageSize: 12, // 拉取猜你喜欢的条数
      showGuessLike: false, // 是否显示猜你喜欢
      guessLikeLoad: true, // 猜你喜欢是否加载中
      guessLikeShowIndex: 5, // 猜你喜欢显示的条数,默认5条
      personLists: null, // 猜你喜欢商品列表
      showMoreDetail: false, // 头部右上角点击
      popupVisible: false, // 服务说明
      tradeDescription: null, // 交易说明
      detail: {}, // 金币商品详情信息
      params: this.$route.params, // 路由参数
      query: this.$route.query, // 路由参数
      isMine: false,
      showShareTip: false // 是否显示导航
    }
  },
  created() {
    this.$indicator.open({
      spinnerType: 'fading-circle'
    });
  },
  mounted() {
    this.getGuessGoodsList()
    this.init()
  },
  beforeDestroy() {
    this.$indicator.close()
    this.$bus.emit('shareShow', false)
  },
  methods: {
    // 跳转猜你喜欢详情
    goLikeDetail(item) {
      location.href = `/vue/coin/detail/${item.id}?gameName=${item.gameName}&gameId=${item.gameId}`
      // this.$router.push({name: 'MGCoinDetail',  params: {goodsId: item.id}, query: {gameName: item.gameName, gameId: item.gameId}})
    },
    // 获取猜你喜欢
    getGuessGoodsList() {
      this.$http.post(this.$CONSTANTS.APIMGSearch + 'goodsSearchService/guessLike',
        {
          bizOfferId: this.params.goodsId,
          pageSize: this.pageSize
        }).then(({ data }) => {
          this.guessLikeLoad = false
          if (data.success) {
            let goodsList = data.respSearch.hits || []
            // this.personLists = goodsList.filter(v => {
            //   if (v.flag && v.flag.indexOf('~') > -1) {
            //     v.is_mjbx = true
            //   } else if (v.flag && v.flag.indexOf('安') > -1) {
            //     v.is_axm = true
            //   }
            //   return v.id !== goodsId // 过滤当前发布单
            // })
            this.personLists = goodsList
            // if (this.personLists.length) this.showGuessLike = true
          } else {
            // this.$toast(data.responseStatus.message)
            this.personLists = []
          }
        })
    },
    // 进入下单页面
    goBuy() {
      if (this.detail.publishStatus != 2) return
      if (this.isMine) {
        this.showShareTip = true
      } else {
        this.$router.push({
          name: 'MGCoinBuy', goodsId: this.params.goodsId, query: this.query
        })
      }
    },
    // 加载更多
    guessLikeLoadMore() {
      this.guessLikeShowIndex += 7
    },
    /* 分享 */
    share() {
      this.$bus.emit('shareShow', true)
    },
    /* 页面销毁前 关闭该关闭的 停止该停止的 */
    beforeDestroy() {
      this.$indicator.close() // 关闭加载中提示
    },
    /* 初始化方法，获取页面一些必要信息 */
    init() {
      Promise.all([
        /**
        * 获取金币详情
        */
        this.$http.post(this.$CONSTANTS.APIMGCoin + 'goods/getGoodsDetail', {
          bizOfferId: this.params.goodsId
        }).then(({ data }) => {
          if (data.success) {
            this.detail = data.data
            document.title = `【${this.query.gameName}】${this.detail.title}_${this.detail.operatorName}_${this.detail.gameServerName}_商品详情_5173`
          } else {
            this.$toast(data.responseStatus.message)
          }
          this.$indicator.close()
        }),
        /**
        * 获取交易说明配置
        */
        this.getTradeDescription({ gameId: this.query.gameId, goodsType: 3 }).then(con => {
          this.tradeDescription = con
        }),
        /**
        * 获取该发布单是否是本人发布
        */
        this.$http.get('/api/mobile-goods-service/rs/sycurrencygoods/selfsycurrencydetail', { params: { goodsId: this.params.goodsId } }).then(res => {
          if (res.data.success) this.isMine = true
        })
      ])
        // 初始化接口结束
        .then(() => {
          this.$nextTick(() => {
            this.$indicator.close()
          })
        })
    },
    ...mapActions({
      getTradeDescription: 'MOBILE_GAME/TRADE_DESCRIPTION',
    })
  }
}
</script>

<style>
.mg_coin_detail .mint-popup-bottom {
  width: 100%;
}
.mg_coin_detail .similar-tip {
  margin-top: .4rem;
  margin-bottom: .4rem;
}

</style>
<style>
.mg_trade_description img {
  max-width: 100%;
}
</style>
